<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>
<div th:replace="~{/commons/common::headBar}"></div>

<div class="container-fluid">
    <div class="row">
        <div th:replace="~{/commons/common::sideBar(active='paper.html')}"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <form th:action="@{/qu/update}" method=post>
                <input type="hidden" name="examId" th:value="${examId}">
                <div class="form-group">
                    <label>题目类型</label>
                    <select class="select">
                        <option name="quType" value="1">判断</option>
                        <option name="quType" value="2">单选</option>
                        <option name="quType" value="3">多选</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>分值</label><br>
                    <input type="text" name="score" class="form-control">
                </div>
                <div class="form-group">
                    <label>题目内容</label>
                    <input autocomplete="off" type="text" name="content" class="form-control">
                </div>
                <div class="form-group">
                    <label>选项</label>
                    <table id="tb1" class="table table-striped table-sm">
                        <thead>
                        <tr>
                            <th>选项</th>
                            <th>正确答案</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input autocomplete="off" class="content" name="content"/></td>
                            <td><input autocomplete="off" name="isRight" class="isRight" type="checkbox" value="0"></td>
                            <td>
                                <button class="btn btn-sm btn-danger" onclick="deltr(this)">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <button type="button" onclick="addtr()">继续添加</button>
                </div>
                <div class="form-group">
                    <label>备注</label><br>
                    <input type="text" name="remake" class="form-control">
                </div>
                <div class="form-group">
                    <label>解析</label><br>
                    <input type="text" name="analysis" class="form-control">
                </div>
                <button type="button" class="btn btn-success mySubmit">完成</button>
                <a class="btn btn-danger" th:href="@{/qu/list/}+${examId}">取消</a>
            </form>
        </main>
    </div>
</div>

<!-- Placed at the end of the document so the pages load faster -->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
<!--<script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}"></script>-->
<script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript">
    //设置value的值
    $(function(){
        $("body").delegate(".isRight","click",function(){
            if($(this).prop("checked")){
                $(this).val(1);
            }else{
                $(this).val(0);
            }
        })
    })
    //加一行
    function addtr() {
        var newTr = tb1.insertRow();
        newTr.innerHTML = '<td><input name="content" class="content"></td>\n' +
            '                            <td><input autocomplete="off" name="isRight" type="checkbox" class="isRight" value="0"></td>\n' +
            '                            <td>\n' +
            '                                <button class="btn btn-sm btn-danger" onclick="deltr(this)">删除</button>\n' +
            '                            </td>';
    }
    //删除一行
    function deltr(r) {
        var i=r.parentNode.parentNode.rowIndex;
        document.getElementById('tb1').deleteRow(i);
    }
    //拼装json字符串
    var listObj;
    document.querySelector('.mySubmit').addEventListener('click',function () {
        var dataList = document.querySelectorAll('.form-control');
        var id = $("[name='id']").val();
        var examId = $("[name='examId']").val();
        var options=$(".select option:selected").val(); //获取选中的项的值
        var quAnswerIds = document.querySelectorAll('.quAnswerId');
        var contentList = document.querySelectorAll('.content');
        var isrightList = document.querySelectorAll('.isRight');
        var length = contentList.length;
        var quAnswerList = new Array(length);
        for (let k = 0; k < length; k++) {
            quAnswerList[k]={
                "id":k>=quAnswerIds.length?null:quAnswerIds.item(k).value,
                "quId":id,
                "content":contentList.item(k).value,
                "isRight":isrightList.item(k).value
            }
        }

        listObj = {"id":id,"quType":options,"examId":examId,"quAnswerList": quAnswerList};

        dataList.forEach((item)=>{
            var name = item.getAttribute('name');
            listObj[name] = item.value;
        })

        console.log(listObj);
        saveAlbumJson();
    })
    var saveAlbumJson = function () {
        $.ajax(
            {
                url: "/qu/add",
                type: "POST",
                contentType: "application/json",
                dataType:"json",
                data: JSON.stringify(listObj),
                success: function (data) {
                    if(data.code == '200') {
                        console.log(data.net);
                        window.location.href = data.net;
                    }
                },
                error: function (xhr, status, p3, p4) {
                    var err = "Error " + " " + status + " " + p3;
                    if (xhr.responseText && xhr.responseText[0] == "{")
                        err = JSON.parse(xhr.responseText).message;
                    alert(err);
                }
            });
    }
</script>
<script>
    
</script>

</body>

</html>